<template>
  <div id="reg-container">
    <!--  头部  -->
    <div class="container middle" style="padding: 80px 0 !important">
      <!--  步骤  -->
      <el-steps style="margin: 30px" :active="step" align-center>
        <el-step title="选择会员类型">
          <i v-if="step === 1" slot="icon" class="step-icon"></i>
        </el-step>
        <el-step title="填写会员信息">
          <i v-if="step === 2" slot="icon" class="step-icon"></i>
        </el-step>
        <el-step title="注册成功">
          <i v-if="step === 3" slot="icon" class="step-icon"></i>
        </el-step>
      </el-steps>
      <!--  内容1 类型  -->
      <el-row v-if="step === 1" class="role-box" :gutter="100">
        <!--  个人  -->
        <el-col :span="8">
          <div class="role-item">
            <img class="avatar" src="~@/assets/img/reg/person@2x.png" alt="" />
            <p class="describe">
              您可以永久免费发布债权债务信息、免费咨询精选全国律师和法律服务。
            </p>
            <el-button type="primary" @click="chooseRole(1)"
              >注册个人会员</el-button
            >
          </div>
        </el-col>
        <!--  律师  -->
        <el-col :span="8">
          <div class="role-item">
            <img class="avatar" src="~@/assets/img/reg/person@2x.png" alt="" />
            <p class="describe">
              您将拥有专属网上办公室、海量债权债务案源和全国业内协作案源。
            </p>
            <el-button type="primary" @click="chooseRole(2)"
              >注册律师会员</el-button
            >
          </div>
        </el-col>
        <!--  企业  -->
        <el-col :span="8">
          <div class="role-item">
            <img class="avatar" src="~@/assets/img/reg/person@2x.png" alt="" />
            <p class="describe">
              企业、机构、组织团体，您可以发布债权债务信息、免费数据精选全国律师和法律服务资源。
            </p>
            <el-button type="primary" @click="chooseRole(3)"
              >注册企业会员</el-button
            >
          </div>
        </el-col>
      </el-row>
      <!--  内容2 输入框  -->
      <div v-if="step === 2">
        <el-form
          class="input-box middle"
          v-if="role == 1"
          ref="form"
          :model="form"
          :rules="rules1"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="form.userName"
              placeholder="请输入您的姓名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="realname">
            <el-input
              v-model="form.idCard"
              placeholder="请输入您的身份证号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="address">
            <el-input
              v-model="form.address"
              placeholder="请输入您的居住地址"
            ></el-input>
          </el-form-item>
          <el-form-item prop="mobile">
            <el-input
              v-model="form.mobile"
              placeholder="请输入您的手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <el-input
                v-model="form.code"
                placeholder="请输入验证码"
              ></el-input>
              <el-button style="margin-left: 15px" type="primary"
                >获取验证码</el-button
              >
            </div>
          </el-form-item>
          <el-form-item prop="userName">
            <el-input
              v-model="form.userName"
              placeholder="请输入登录名称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              placeholder="请输入登录密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password1">
            <el-input
              v-model="form.password1"
              placeholder="请再次输入登录密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input
              v-model="form.email"
              placeholder="请输入电子邮箱"
            ></el-input>
          </el-form-item>

          <!--        -->
          <div class="">
            <el-checkbox>我已阅读并同意《我的服务协议》</el-checkbox>
          </div>
          <!--        -->
          <el-form-item style="margin-top: 20px">
            <el-button type="primary" style="width: 100%" @click="register('form')"
              >立即注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <!--  内容3 成功消息  -->
      <div class="success-box middle" v-if="step === 3">
        <div class="succ-icon">
          <img src="~@/assets/img/reg/success@2x.png" alt="" />
        </div>
        <div class="message-box">
          <div class="msg-title">恭喜您注册成功！</div>
          <div class="msg-content" v-if="role==0">
            尊敬的个人会员：{{form.userName}} 你好，你已成功注册债权交易流转平台个人会员！
            本平台会员需要进行认证后，才可进行查看债权相关信息。！
          </div>
          <div class="msg-content" v-if="role==1">
            尊敬的个人会员：文咏珊 你好，你已成功注册债权交易流转平台个人会员！
            本平台会员需要进行认证后，才可进行查看债权相关信息。！
          </div>
          <div class="msg-content" v-if="role==2">
            尊敬的个人会员：文咏珊 你好，你已成功注册债权交易流转平台个人会员！
            本平台会员需要进行认证后，才可进行查看债权相关信息。！
          </div>
          <div class="msg-btn">
            <el-button type="primary">认证</el-button>
            <el-button style="margin-left: 15px" type="primary"
              >进入个人中心</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "Reg",
  data() {
    return {
      rules1: {
        userName: [
          { required: true, message: "请输入您的姓名", trigger: "blur" },
        ],
        idCard: [
          { required: true, message: "请输入您的身份证号", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入您的居住地址", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入您的手机号码", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],

        password: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        email: [{ required: true, message: "请输入电子邮箱", trigger: "blur" }]
      },
      step: 1,
      role: 0,
      form: {},
    };
  },
  computed: {
    identity: function () {
      if (this.role == 0) return "个人";
      if (this.role == 0) return "律师";
      if (this.role == 0) return "企业";
    },
  },
  mounted() {},
  methods: {
    chooseRole(role) {
      this.role = role;
      this.step = 2;
    },
    register() {
      this.form.userType = 0;
      this.$refs.form.validate((valid) => {
            if (valid) {
          this.$util.post("api/user/register", this.form).then((res) => {
            console.log(res);
            this.step = 3;
          });
          }
      })
    },
  },
};
</script>
<style scoped>
#reg-container {
  background-size: 100%;
  min-height: 100vh;
  background-image: url("../assets/img/reg/background@2x.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 100%;
}

.middle {
  margin: 0 auto !important;
}

.step-icon {
  width: 12px;
  height: 12px;
  background: #2aa8ea;
  border-radius: 100%;
}

.input-box {
  padding: 20px 35px;
  width: 450px;
  background: #ffffff;
  box-shadow: 0 3px 6px 1px rgba(171, 171, 171, 0.15);
  border-radius: 8px;
}
.input-box >>> .el-form-item {
  margin-bottom: 15px;
}
.input-box >>> .el-input__inner {
  color: #28a5e1;
  font-size: 16px;
}

.input-box >>> .el-button {
  background: #2aa8ea;
  border-radius: 4px;
}

.role-box {
  margin: 50px;
}

.role-box .role-item {
  text-align: center;
  width: 380px;
  background: #ffffff;
  box-shadow: -4px 12px 20px 0px rgba(113, 113, 113, 0.15);
  border-radius: 20px;
  padding: 30px;
}

.role-item .avatar {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.role-item .describe {
  margin: 40px 0;
  font-size: 22px;
  color: #333333;
}

.role-item >>> .el-button {
  width: 200px;
  height: 50px;
  background: #2aa8ea;
  border-radius: 4px;
}

.success-box {
  padding-top: 80px;
  display: flex;
  align-items: flex-start;
}

.success-box .succ-icon img {
  width: 176px;
  height: 198px;
}

.success-box .message-box {
  padding-left: 35px;
}

.success-box .message-box .msg-title {
  color: #00b9f4;
  font-size: 36px;
  margin-bottom: 25px;
}

.success-box .message-box .msg-content {
  color: #333333;
  font-size: 22px;
}

.success-box .message-box .msg-btn {
  margin-top: 15px;
  display: flex;
  align-items: center;
}

.success-box >>> .el-button {
  background: #2aa8ea;
  border-radius: 4px;
}
</style>

